<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大文件上传</title>
</head>
<body>
    <h1>大文件上传</h1>
    <input type="file" id="fileInput" />
    <button onclick="uploadFile()">上传</button>
    <progress id="progressBar" value="0" max="100"></progress>

    <script>
        const chunkSize = 5 * 1024 * 1024;
        async function uploadFile() {
            const fileInput = document.getElementById("fileInput");
            const progressBar = document.getElementById("progressBar");
            const file = fileInput.files[0];
            if (!file) {

                return;
            }
            const totalChunks = Math.ceil(file.size / chunkSize);
            for (let i = 0; i < totalChunks; i++) {
                const start = i * chunkSize;
                const end = Math.min(start + chunkSize, file.size);
                const chunk = file.slice(start, end);
                if (chunk.size === 0) {
                    continue;
                }
                const formData = new FormData();
                formData.append("file", chunk);
                formData.append("chunk_number", i + 1);
                formData.append("total_chunks", totalChunks);
                formData.append("filename", file.name);
                await fetch("/api/v1/file/upload/", {
                    method: "POST",
                    body: formData,
                });
                progressBar.value = ((i + 1) / totalChunks) * 100;0
            }
            alert("上传成功");
        }
    </script>
</body>
</html>
